<template>
  <div class="_wz_videoComponent">
    <video :id="videoId" class="video-js vjs-big-play-centered vjs-fluid" preload="none" controls width="100%" height="100%"></video>
  </div>
</template>

<script>

import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
import "videojs-flvjs-es6";
import "videojs-flash";
import Vue from 'vue'

export default {
  //id  地址  录播状态  通道  车辆数据
  props:['videoId','videoUrl','recordedType','CH','coreVehicle'],
  data() {
    return {
      videoPlayer: null,
      // videoUrl:'http://172.16.18.233:3333/video/013305622219-2',
      // videoUrl:'http://1011.hlsplay.aodianyun.com/demo/game.flv'
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    //flv
    this.flvVideo();

  },
  methods: {//执行的方法
    flvVideo(){
      let that = this;
      var children = {}
      if(that.recordedType){
        children.playToggle = true;//播放 暂停
      }
      children.muteToggle = true; //声音
      children.VolumeControl = true; //声音

      this.videoPlayer = Videojs(document.querySelector('#'+that.videoId),{
        autoplay: 'muted',//'muted',//自动播放
        controls: true,//用户可以与之交互的控件
        loop:false,//视频一结束就重新开始
        muted:false,//默认情况下将使所有音频静音
        aspectRatio:"16:9",//显示比率
        poster: "/static/img/videos.png", //开始播放前显示的图像的URL
        fullscreen:{
          options: {navigationUI: 'hide'}
        },
        techOrder: ["html5", "flvjs"],// 兼容顺序
        flvjs: {
          mediaDataSource: {
            isLive: false,
            cors: true,
            withCredentials: false
          }
        },
        controlBar: {
          children
          // children: {
          //   playToggle:false,// that.recordedType, //播放 暂停
          //   muteToggle: true, //声音
          //   VolumeControl: true, //声音
          // }
        },
        sources: [{ src: that.videoUrl, type: "video/x-flv" }]
      }, function () {
        console.log(that.videoId+'  成功')



        //播放 停止
        let MyComponent = Vue.extend({
          template: '<div style="line-height: 30px;font-size: 14px;padding: 0 10px;" @click="inotType = !inotType"><i class="fa" :class="inotType?\'fa-pause\':\'fa-stop\'"></i></div>',
          data:function(){
            return {
              inotType:false,//播放 fa-pause    停止  fa-stop   暂停  fa-play   true 播放   false 停止
            }
          },
          watch: {//监听
            inotType(news,old){
              if(news){//播放
                that.videoPlayer.src({ src: that.videoUrl, type: "video/x-flv" })
                that.videoPlayer.play();
              }else{//暂停
                that.videoPlayer.pause();
              }
            }
          },
        });
        let component = new MyComponent().$mount();
        var data = document.getElementById(that.videoId).getElementsByClassName('vjs-control-bar')[0];
        if(!that.recordedType){
          data.insertBefore(component.$el,data.childNodes[0]);
        }
        // document.getElementById(that.videoId).getElementsByClassName('vjs-control-bar')[0].insertBefore(component.$el)
        // document.getElementsByClassName('vjs-control-bar')[0].appendChild(component.$el);

        //通道CH

        //播放 停止
        // console.log(that.coreVehicle)
        let CH = Vue.extend({
          template: '<div style="line-height: 30px;font-size: 14px;padding: 0 10px;" >' + that.coreVehicle.carPlateNo + ' - CH' + (parseInt(that.CH) + 1) + '</div>',
        });
        let CHcomponent = new CH().$mount();
        var data = document.getElementById(that.videoId).getElementsByClassName('vjs-control-bar')[0];
        data.appendChild(CHcomponent.$el,data.childNodes[0]);


        this.on('play',function () {
          if(!that.recordedType){
            component.inotType = true;
          }
          // console.log('开始',that.videoId)
        });
        this.on('pause',function (e) {
          if(!that.recordedType){
            component.inotType = false;
          }
          // console.log('暂停')
        });


        this.on('error',function (e) {
          console.log('错误',e)
        });

        console.log(that.flvjs.Events.ERROR)

        this.on(that.flvjs.Events.ERROR, (errType, errDetail) => {
          console.log('flvjs错误',errType,1111111111111111111111)
        });


      })
    }

  },
  watch: {//监听

  },

  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态
    this.videoPlayer.dispose()
  }
}
</script>
<style>
.vjs-poster {
  background-image: url("../../assets/video1.png") !important;
}
</style>
<style lang="less">

._wz_videoComponent {
  width: 100%;
  height: 100%;
  position: relative;

  .video-js {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .vjs-fluid{
    padding: 0px!important;
  }

  .video-js {
    /*transform: rotate(90deg);*/
  }
  .vjs-control-bar{
    display: flex;
    opacity:1!important;
  }
  .vjs-big-play-button{
    display: none;
  }

  .vjs-big-play-centered .vjs-big-play-button {
    z-index: 101;
  }
}

</style>
